<template>
  <div class="audit">
    <title-vue>
      <span>文章审核</span>
    </title-vue>
    <div class="content">
      <ul>
        <li>
          <span class="index">序号</span>
          <span class="username">用户名</span>
          <span class="biaoti">标题</span>
          <span class="tag">标签</span>
          <span class="time">上传时间</span>
          <span class="caozuo">操作</span>
        </li>
        <li v-for="(item,index) in res" :key="item.articleid">
          <span class="index">{{index + 1}}</span>
          <span class="username">{{item.username}}</span>
          <span class="biaoti">{{item.title}}</span>
          <span class="tag">{{item.tag}}</span>
          <span class="time">{{item.time.timer()}}</span>
          <span class="caozuo">
            <div class="look" title="查看" @click="checkArticle(item)">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-chakan'></use>
              </svg>
            </div>
            <div class="shenghe" title="审核" @click="auditArticle(item)">
              <svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-shenhe'></use>
              </svg>
            </div>
          </span>
        </li>
        <li class="hint" v-show="articleData.length == 0"><span>暂无文章</span></li>
      </ul>
      <paging-vue @result="showRes" :result="articleData"></paging-vue>
    </div>
    <transition name="fade">
      <audit-article 
      @offAudit="articleObj=null" 
      v-if="articleObj" 
      :articleObj="articleObj"></audit-article>
    </transition>
    <transition name="fade">
      <audit-form 
      @offAudit="formObj=null"
      @submitAudit="submitAudit"
      v-if="formObj" 
      :formObj="formObj"></audit-form>
    </transition>
  </div>
</template>

<script>
import auditArticle from "./auditArticle.vue"
import auditForm from "./auditForm.vue"
import titleVue from "../title.vue"
import pagingVue from "../../../info/mini/paging.vue"
export default {
  name: 'Audit',

  data() {
    return {
      articleData: [], // 待审核文章数据
      classifyList: this.$store.state.articleClassify, // 分类列表
      res: [], // 展示数据
      articleObj: null, // 当前审核的文章对象
      formObj: null // 当前审核的文章对象
    };
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
      this.$api.getAuditArticle().then(res => {
        this.articleData = res.data
      })
    },
    // 查看文章
    checkArticle(obj){
      this.articleObj = null
      setTimeout(() => {this.articleObj = obj},300)
    },
    // 审核文章
    auditArticle(obj){
      this.formObj = null
      setTimeout(() => {this.formObj = obj},300)
    },
    // 提交审核
    submitAudit(){
      this.init()
    },
    // 展示数据
    showRes(res){
      this.res = res
    }
  },

  components: {
    auditArticle,auditForm,titleVue,pagingVue
  }
};
</script>

<style scoped>
.content ul{
  width: 100%;
  margin-top: 30px;
  border: 1px solid gray;
  border-bottom: none;
}
.content ul li{
  display: flex;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid gray;
}
.content ul li span{
  border-right: 1px solid gray;
  text-align: center;
  font-size: 0.8rem;
}
.content li:nth-child(1){
  background-color: green;
  color: white;
  font-weight: 600;
}
.index{
  width: 50px;
  text-align: center;
}
.username,.caozuo{
  flex:1;
}
.content li .time,.biaoti,.tag{
  flex: 2;
  font-size: 0.8rem;
}
.content li .caozuo{
  display: flex;
  align-items: center;
  justify-content: center;
}
.biaoti{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.caozuo div{
  cursor: pointer;
  display: flex;
  align-items: center;
}
.caozuo .icon{
  font-size: 2em;
}
.hint{
  justify-content: center;
}
.hint span{
  border: none !important;
}
</style>